<template>
  <div class="list">
    <my-header>
      <template #left>
        <span></span>
      </template>
      <template #title>
        <span>图书商城</span>
      </template>
      <template #button>
        <span @click="$router.push('/books')">我的书架</span>
      </template>
    </my-header>
    <input type="text" v-model="keyword" @keydown.enter="search" />
    <div class="con">
      <myList v-for="item in result" :key="item.id" :item="item">
        <span @click="addCol(item)">+</span>
      </myList>
    </div>
  </div>
</template>
<script>
import myList from "@/components/myList";
import { mapMutations } from "vuex";
//这里用了vuex的辅助函数
export default {
  data() {
    return {
      keyword: "",
      result: [],
    };
  },
  created() {
    this.$store.dispatch("getList");

    // this.$nextTick(() => {
    //   console.log(this.list);
    //   this.result = this.list;
    // });
    //只排在dom更新这个异步操作的后面
    setTimeout(() => {
      console.log(this.list);
      this.result = this.list;
    }, 0);
    //变成异步操作
    //排在前面代码的异步操作之后
  },

  //进入页面调用action请求数据
  computed: {
    list() {
      return this.$store.state.list;
    },
  },
  components: {
    myList,
  },
  methods: {
    ...mapMutations(["addCol"]),
    //这里把辅助函数展开
    search() {
      this.result = this.list.filter((item) =>
        item.name.includes(this.keyword)
      );
    },
    //搜索
  },
};
</script>
<style lang="scss" scoped>
.list {
  .con {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
}
</style>
